import React from 'react';
import { Row, Col, Input, Select, Checkbox, Button, message} from 'antd';
import './UserInfo.css';
import {UpOutlined} from '@ant-design/icons';
// import axios from 'axios';
import axios from '../../util/http'
import * as url from '../../util/api'

import {NavLink} from "react-router-dom";

const { Option } = Select;

class UserInfo extends React.Component {
    constructor(props){
        super(props);
        this.state={
            thisUserInfo:{     //用户信息
                username :'',
                password:'',
                userAccount:'',
                tel:'',
                deptName:'',
                jobName:'',
            },
            isShowRoleBox: false,  //权限div的显示状态
        }
    }
    //改变state的值
    changeState=(name,value)=>{
        this.setState({
            [name]:value
        })
    };
    //发起请求，获取账号信息
    getUserInfo=(postData)=>{
        // console.log('发起请求的数据');
        // console.log(postData);
        axios({
            url:url.showPersonInfo,
            method:'post',
            data:postData,
        }).then(res=>{
           /* console.log('获取到的用户信息');
            console.log(res);*/
            if (res.data.code===200){
                // message.success('账号信息获取成功');
                let userInfo={
                    username : res.data.data.username,
                    password: res.data.data.password,
                    userAccount: res.data.data.userAccount,
                    tel:res.data.data.tel,
                    deptName:res.data.data.dept[0].deptName,
                    jobName:res.data.data.job[0].jobName,
                };
                /*将数据存入state*/
                this.changeState('thisUserInfo',userInfo);
            }else {
                message.error('账号信息获取失败');
            }
        })
    };
    //输入框的值发生改变
    textChange=(itemName)=>{
        return (e)=>{
            let newUserInfo=Object.assign(this.state.thisUserInfo,{[itemName]:e.target.value});
            this.changeState('thisUserInfo',newUserInfo);
        }
    };
    //部门的下拉列表值改变
    selectChange=(value)=>{
        let newUserInfo=Object.assign(this.state.thisUserInfo,{dept:value});
        this.changeState('thisUserInfo',newUserInfo);
    };
    //点击显示/隐藏权限信息
    showRoleBox=()=>{
        this.changeState('isShowRoleBox', !this.state.isShowRoleBox);
        this.showDiv();
    };
    //权限div的渲染
    showDiv=()=>{
        if(this.state.isShowRoleBox){
            return <div className='roleBox'>
                <p>权限说明：这是您的账号系统权限明细，有无权限一一给您列出来了，如需变更权限，请联系系统管理员；</p>
                <div className='roleCheckBox'>
                    账号角色：
                    <div>
                        <Checkbox disabled={true} checked={true}>系统管理员</Checkbox>
                        <Checkbox disabled={true}>业务负责人</Checkbox>
                        <Checkbox disabled={true} checked={true}>订单审核员</Checkbox>
                        <Checkbox disabled={true} checked={true}>财务审核员</Checkbox>
                        <Checkbox disabled={true}>发货审核员</Checkbox>
                        <Checkbox disabled={true}>业务经理</Checkbox>
                        <Checkbox disabled={true}>仓库管理员</Checkbox>
                        <Checkbox disabled={true}>资料维护员</Checkbox>
                    </div>
                </div>
            </div>
        }else {
            return <div/>
        }
    };
    //点击“保存”
    saveUserInfo=()=>{
        /*console.log('要保存的用户信息');
        console.log(this.state.thisUserInfo);*/
        if(this.checkUserName()&&this.checkPassword()&&this.checkTel()){
            axios({
                url:url.editPersonInfo,
                method:'post',
                data:this.state.thisUserInfo,
            }).then(res=>{
                /*console.log('保存用户信息返回');
                console.log(res);*/
                if (res.data.code===200){
                    message.success('保存成功');
                    this.getUserInfo({userAccount: this.state.thisUserInfo.userAccount});  //刷新页面
                }else {
                    message.error('保存失败');
                }
            })
        }
    };
    //验证手机号格式
    checkTel=()=>{
        if(/^1[3456789]\d{9}$/.test(this.state.thisUserInfo.tel)){
            return true
        }else {
            message.error('手机格式不正确');
            return false
        }
    };
    //验证用户名
    checkUserName=()=>{
        if(!(/^[\u4E00-\u9FA5A-Za-z0-9]+$/ .test(this.state.thisUserInfo.username))){
            message.error('用户名不能为空，且只能是中文，字母，数字');
            return false
        }else {
            return true
        }
    };
    //验证密码
    checkPassword=()=>{
        if(this.state.thisUserInfo.password.length<3||this.state.thisUserInfo.password.length>5){
            message.error('请输入3-5位密码');
            return false
        }else {
            return true
        }
    };
    render() {
        let roleDiv = this.showDiv();   //权限部分
        return (
            <div className='ProductPage'>
                <form>
                    <Row gutter={64}>
                        <Col className="gutter-row" span={12}>
                            <table>
                                <tbody>
                                <tr>
                                    <td>账号</td>
                                    <td>
                                        <Input onChange={this.textChange('userAccount')}  placeholder='请输入账号' value={this.state.thisUserInfo.userAccount} disabled={true}/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>姓名</td>
                                    <td>
                                        <Input onChange={this.textChange('username')} placeholder='请输入姓名' value={this.state.thisUserInfo.username}/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>手机</td>
                                    <td>
                                        <Input onChange={this.textChange('tel')} placeholder='请输入手机号' value={this.state.thisUserInfo.tel}/>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </Col>
                        <Col className="gutter-row" span={12}>
                            <table>
                                <tbody>
                                <tr>
                                    <td>密码</td>
                                    <td>
                                        <Input onChange={this.textChange('password')} placeholder='请输入密码' value={this.state.thisUserInfo.password}/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>部门</td>
                                    <td>
                                        {/*<Select defaultValue={this.state.thisUserInfo.deptName} onChange={this.selectChange} disabled>
                                            <Option value="行政部">行政部</Option>
                                            <Option value="销售部">销售部</Option>
                                        </Select>*/}
                                        <Input onChange={this.textChange('deptName')} placeholder='请输入部门名称' value={this.state.thisUserInfo.deptName} disabled/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>职位</td>
                                    <td>
                                        <Input onChange={this.textChange('jobName')} placeholder='请输入职位名称' value={this.state.thisUserInfo.jobName} disabled/>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </Col>
                    </Row>
                </form>
                <div className='showRole' onClick={this.showRoleBox}>我的账号权限 <UpOutlined rotate={this.state.isShowRoleBox ? 0 : 180}/></div>
                {roleDiv}
                <div className='btnBox'>
                    <Row>
                        <Col span={4} offset={10} className='btnCol'>
                            <Button><NavLink to='/homepage/indexpage'>取消</NavLink></Button>
                            <Button type="primary" onClick={this.saveUserInfo}>保存</Button>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    };
    componentDidMount() {
        // console.log(JSON.parse(sessionStorage.getItem('userdata')));
        const userData = JSON.parse(sessionStorage.getItem('userdata'));  //获取当前登录用户信息
        let loginUser = { userAccount: userData.userAccount};
        this.getUserInfo(loginUser); //发起请求获取账号信息
    }
}

export default UserInfo;